<template>
	<view class="all_layout">
		<view class="page_body">
			<view class="chat_item" v-for="message in messages" :key="message.time">
				<view class="body_message">
					<view class="ai_item" v-if="message.type == 'ai'">
						<view class="chat_time">{{ message.time }}</view>
						<view class="ai_message">
							<view class="ai_touxiang">
								<image class="touxiang" :src="message.photoUrl" mode="aspectFill"></image>
							</view>
							<view class="aichat">{{ message.text }}</view>
						</view>
					</view>
					<view class="sender_item" v-if="message.type == 'sender'">
						<view class="chat_time">{{ message.time }}</view>
						<view class="sender_message">
							<view class="senderchat">{{ message.text }}</view>
							<view class="sender_touxiang">
								<image class="touxiang" :src="message.photoUrl" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="send_item">
			<view class="shuru">
				<input v-model="userInput" placeholder="在此输入要发送的信息" />
			</view>
			<view class="fasong" @click="sendMessage">
				<button class="anniu" type="primary">发送</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import { useStore } from "@/stores/index.js"
import { Websocket } from '../../websocket'
import { settings } from '@/settings/index.js'

const usestore = useStore()
const websocket = new Websocket(`${settings.ws_host}/chat/index`)
const userInput = ref("");

websocket.send({
	action: 'login',
	message: usestore.get_token()
})

const messages = ref([{
    type: 'sender',
    text: '你是谁？',
    time: '2024-05-03 14:13:22',
    photoUrl: 'https://pic1.zhimg.com/80/v2-0aca47cf23db7047d051f03297312d64_720w.webp',
  },
   {
    type: 'ai',
    text: '我是ChatGPT，一个由OpenAI开发的大型语言模型。我基于GPT-4架构构建，旨在通过自然语言处理技术帮助用户解决各种问题、回答问题、提供建议和进行对话。<br><br>我能够理解和生成文本，处理从简单问题到复杂任务的广泛请求，包括但不限于编写代码、创建内容、提供解释和建议、以及进行翻译。我的知识库截止到2023年10月，这意味着我能提供的信息和回答基于我在那之前的训练数据。<br><br>我不是一个真人，而是一个由人工智能驱动的程序，旨在通过文本形式与用户进行互动。我的目的是帮助用户找到他们需要的信息，解决问题，或者提供有价值的对话。',
    time: '2024-01-26 13:43:15',
    photoUrl: 'https://www.lulinux.com/d/file/bigpic/az/234906/xldp0zb1vlw.png',
  }
])

// const pageScrollToBottom = ()=>{
//     let that = this;
//     wx.createSelectorQuery().select('#x_chat').boundingClientRect(function (rect) {
//       let top = rect.height * messages.value.length;
//       wx.pageScrollTo({
//         scrollTop: top,
//         duration: 100
//       })
//     }).exec()
// }
// pageScrollToBottom();

const sendMessage = ()=>{
 //   	if(!useStore.get_payload()){
	// 	uni.navigateTo({
	// 		url: '/pages/login/login',
	// 	})
	// }	
	// // 跳转登陆页面
	

	if (userInput.value.trim() === '') return;
	websocket.send({
		action: 'chat',
		message: userInput.value
	})
	const userMessage = {
	type: 'sender',
	text: userInput.value,
	time: '2024-01-26 13:59:12',
	photoUrl: 'https://pic2.zhimg.com/80/v2-ab37ad93a61fc94135f1c67ea2412c55_720w.webp',
	};
	messages.value.push(userMessage);
	userInput.value = '';
	// pageScrollToBottom();
}
websocket.socketTask.onMessage((res)=>{
	console.log("res:::",res);
	let data = JSON.parse(res.data)
	const userMessage = {
	type: 'ai',
	text: data.message,
	time: '2024-01-26 13:59:12',
	photoUrl: 'https://www.lulinux.com/d/file/bigpic/az/234906/xldp0zb1vlw.png',
	};
	messages.value.push(userMessage);
	userInput.value = '';
})



const to_login = () => {
	// uni.navigateTo({
	// 	url:"/pages/login/login"
	// })
}
</script>

<style lang="scss" scoped>
.all_layout{
	width: 750rpx;
	height: 100vh;
	background: #FFF;
	display: flex;
	flex-direction: column;
	.page_body{
		flex: 1;
		overflow-y: auto;
		padding-bottom: 120rpx;
		.chat_item{
			.body_message{
				.ai_item{
					margin-bottom: 30rpx;
					.chat_time{
						text-align: center;
						padding-bottom: 10rpx;
					}
					.ai_message{
						display: flex;
						align-items: flex-start;
						.ai_touxiang{
							height: 100rpx;
							width: 100rpx;
							padding-left: 10rpx;
							.touxiang{
								height: 100%;
								width: 100%;
							}
						}
						.aichat{
							margin: 15rpx;
							flex: 1;
							padding-left: 15rpx;
							margin-right: 80rpx;
							background: #DDE3E9;
							border-radius: 10px;
						}
					}
				}
				.sender_item{
					margin-bottom: 30rpx;
					.chat_time{
						text-align: center;
						padding-bottom: 10rpx;
					}
					.sender_message{
						display: flex;
						align-items: flex-start;
						justify-content: flex-end;
						.senderchat{
							display: flex;
							align-items: center;
							justify-content: flex-end;
							flex: 1;
							text-align: right;
							margin-top: 15rpx;
							padding-right: 15rpx;
							margin-left: 80rpx;
							color: green;
							
						}
						.sender_touxiang{
							height: 100rpx;
							width: 100rpx;
							padding-right: 10rpx;
							.touxiang{
								height: 100%;
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
	.send_item{
		background: lightcoral;
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background: #DDE3E9;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		.shuru{
			border-radius: 10px;
			background: #FFF;
			margin-right: 10rpx;
			width: 100%;
			height: 80%;
		}
		.fasong{
			min-width: 120rpx;
			height: 90rpx;
			display: flex;
			text-align: center;
			.anniu{
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
